<template>
	<div>
		<el-container>
			<head-top>
			</head-top>
			<el-header><el-form :inline="true" class="form-inline form-menu-function">
					<el-button type="primary" icon="el-icon-edit" @click="create">新增</el-button>
				</el-form></el-header>
			
			<el-main>
				<el-table :data="tableData">
					
					<el-table-column prop="id" label="序号" width="100">
					</el-table-column>
					<el-table-column prop="username" label="账号" width="400">
					</el-table-column>
					<el-table-column prop="nickname" label="昵称" width="400">
					</el-table-column>
					<el-table-column prop="phone" label="手机" width="400">
					</el-table-column>
					<el-table-column label="操 作" width="400">
						<template slot-scope="scope">
							<el-button size="medium" type="info" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>
			
			</el-main>
			<el-dialog title="用户编辑" :visible.sync="dialogFormVisible">
				<el-form :model="dialogform" :rules="rules2" ref="dialogform">
					<el-form-item label="账号" :label-width="formLabelWidth">
						<el-input v-model="dialogform.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="昵称" :label-width="formLabelWidth">
						<el-input v-model="dialogform.nickname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth" prop="idcid">
						<el-input type="password" v-model="dialogform.password" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机" :label-width="formLabelWidth" prop="idcid">
						<el-input type="phone" v-model="dialogform.phone" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('dialogform')">确 定</el-button>
				</div>
			</el-dialog>
		
		</el-container>
	</div>
	
	
</template>

<script>
	import headTop from '@/components/headTop'
	import {register,list,del,search,update} from '@/api/user'
	export default {
		data() {
			return {
				ruleForm: {},
				rules:{},
				rules2:{},
				tableData: [],
				dialogFormVisible:false,
				count: 0,
				currentPage: 1,
				pageSize: 10,
				dialogform: {},
				formLabelWidth: "20",
			}
			
		},
		created(){
			this.initData(this.currentPage, this.pageSize);
		},
		methods:{
			submitForm(dialogform){
				update(this.dialogform)
				.then((response) => {
					console.log(response)
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.dialogFormVisible=false
					
				})
				.catch((error) => {
					console.log(error)
					this.$message({
						type: 'error',
						message: '操作失败!'
					});
				})
			},
			handleEdit(index, row) {
				this.dialogform = {}
				this.dialogform = JSON.parse(JSON.stringify(row));
			
				this.dialogFormVisible = true
			
			},
			async handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(row)
						.then((response => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.initData(this.currentPage, this.pageSize)
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			
			},
			async initData(currentPage, pageSize) {
				await list(currentPage, pageSize)
					.then((response) => {
						this.inittable(response)
					})
			},
			inittable(response) {
				this.tableData = response.items;
				this.count = response.totalNum;
			},
			create(){
				this.dialogform = {
					status: "0",
				}
				this.dialogFormVisible = true;
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.onSearch();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.onSearch();
			},
			onSearch() {
				search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
		},
		components: {
			headTop,
		},
		
	}
</script>

<style>
</style>
